<template>
        <template v-if="filterColumn.filterValue.dataType == 'boolean'">
        </template>
        <template v-else>
            <label style="white-space: nowrap; ">{{ filterColumn.label }}：</label>
        </template>
        
        <a-space size="small">
        <template v-if="filterColumn.filterValue.droplist == true">
            <template v-if="filterColumn.filterValue.operator == 'in'">
                <el-select
                    :size="filterColumn.size"
                    v-model="filterColumn.valueArr"
                    :multiple="true"
                    :clearable="true"
                    @change="onChange"
                    style="width:230px">
                    <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </template>
            <template v-else>
                <el-select
                    :size="filterColumn.size"
                    v-model="filterColumn.value"                    
                    :clearable="true"
                    @change="onChange"
                    style="width:120px">
                    <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </template>
        </template>
        <template v-else>        
            <template v-if="filterColumn.filterValue.checkboxes == true">
                <el-checkbox-group v-model="filterColumn.valueArr">
                    <el-checkbox v-for="item in selectOptions" :label="item.value">{{item.label}}</el-checkbox>
                </el-checkbox-group>
            </template>
            <template v-else-if="filterColumn.filterValue.dataType == 'string'">
                <el-input 
                    :clearable="true"
                    :size="filterColumn.size"
                    v-model="filterColumn.value"
                    @change="onChange"
                    style="width:120px">
                    <template v-if="filterColumn.prefix" #prefix>{{filterColumn.prefix}}</template>
                    <template v-if="filterColumn.suffix" #suffix>{{filterColumn.suffix}}</template>
                </el-input>
            </template>
            <template v-else-if="filterColumn.filterValue.dataType == 'boolean'">
                <el-checkbox v-model="filterColumn.value" @change="onChange">{{ filterColumn.label }}</el-checkbox>
            </template>
            <template v-else-if="(filterColumn.filterValue.dataType == 'number' || filterColumn.filterValue.dataType == 'int')">
                <template v-if="filterColumn.filterValue.operator == 'between'"><!-- oninput只能输入和数字有关的字符，但没法限制个数  onblur:检查整体输入字符串是否数字-->
                    <el-input maxlength=11 oninput="value=value.replace(/[^0-9.\-\+]/g,'')" onblur="value=/^(\-|\+)?\d+(\.\d+)?$/.test(value)?value:''"
                        :size="filterColumn.size"
                        v-model="filterColumn.value"
                        @change="onChange"
                        style="width:95px">
                    <template v-if="filterColumn.prefix" #prefix>{{filterColumn.prefix}}</template>
                    </el-input>-
                    <el-input maxlength=11 oninput="value=value.replace(/[^0-9.\-\+]/g,'')" onblur="value=/^(\-|\+)?\d+(\.\d+)?$/.test(value)?value:''"
                        :size="filterColumn.size"
                        v-model="filterColumn.value2" 
                        @change="onChange"
                        style="width:95px">
                    <template v-if="filterColumn.prefix" #prefix>{{filterColumn.prefix}}</template>
                    </el-input>
                    <span v-if="filterColumn.suffix">{{filterColumn.suffix}}</span>
                </template>
                <template v-else>
                    <el-input maxlength=11 oninput="value=value.replace(/[^0-9.\-\+]/g,'')" onblur="value=/^(\-|\+)?\d+(\.\d+)?$/.test(value)?value:''"
                        :size="filterColumn.size"
                        v-model="filterColumn.value"
                        @change="onChange"
                        style="width:95px">
                    <template v-if="filterColumn.prefix" #prefix>{{filterColumn.prefix}}</template>
                    <template v-if="filterColumn.suffix" #suffix>{{filterColumn.suffix}}</template>
                    </el-input>
                </template>
            </template>            
            <template v-else-if="filterColumn.filterValue.dataType == 'date'">
                <template v-if="filterColumn.filterValue.operator == 'between'">                    
                    <el-date-picker
                        :size="filterColumn.size"
                        v-model="filterColumn.value" value-format="YYYY-MM-DD"
                        @change="onChange"
                        style="width:125px"
                        placeholder="起始日期(含)"
                    ></el-date-picker>-
                    <el-date-picker
                        :size="filterColumn.size"
                        v-model="filterColumn.value2" value-format="YYYY-MM-DD"
                        @change="onChange"
                        style="width:125px"
                        placeholder="截止日期(含)"
                    ></el-date-picker>
                </template>
                <template v-else>
                    <el-date-picker
                        :size="filterColumn.size"
                        v-model="filterColumn.value" value-format="YYYY-MM-DD"
                        @change="onChange"
                        style="width:125px"
                        placeholder="日期"
                    ></el-date-picker>
                </template>
            </template>
            <template v-else-if="filterColumn.filterValue.dataType == 'date-year'">
                <template v-if="filterColumn.filterValue.operator == 'between'">
                    <el-date-picker picker="year" type="year" value-format="YYYY"
                        :size="filterColumn.size"
                        v-model="filterColumn.value"
                        @change="onChange"
                        style="width:90px"
                        placeholder="起始年份(含)"
                    ></el-date-picker>-
                    <el-date-picker picker="year" type="year" value-format="YYYY"
                        :size="filterColumn.size"
                        v-model="filterColumn.value2"
                        @change="onChange"
                        style="width:90px"
                        placeholder="截止年份(含)"
                    ></el-date-picker>
                </template>
                <template v-else>
                    <el-date-picker picker="year" type="year" value-format="YYYY"
                        :size="filterColumn.size"
                        v-model="filterColumn.value"
                        @change="onChange"
                        style="width:90px"
                        placeholder="年份"
                    ></el-date-picker>
                </template>
            </template>
            <template v-else-if="filterColumn.filterValue.dataType == 'date-month'">
                <template v-if="filterColumn.filterValue.operator == 'between'">
                    <el-date-picker picker="month" type="month" value-format="YYYY-MM"
                        :size="filterColumn.size"
                        v-model="filterColumn.value"
                        @change="onChange"
                        style="width:120px"
                        placeholder="起始月份(含)"
                    ></el-date-picker>-
                    <el-date-picker picker="month" type="month" value-format="YYYY-MM"
                        :size="filterColumn.size"
                        v-model="filterColumn.value2"
                        @change="onChange"
                        style="width:120px"
                        placeholder="截止月份(含)"
                    ></el-date-picker>
                </template>
                <template v-else>
                    <el-date-picker picker="month" type="month" value-format="YYYY-MM"
                        :size="filterColumn.size"
                        v-model="filterColumn.value"
                        @change="onChange"
                        style="width:120px"
                        placeholder="月份"
                    ></el-date-picker>
                </template>
            </template>
        </template>
        </a-space>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { FilterColumn } from '@/common/dayu-common'

export default defineComponent({
    components: {

    },
    props: {
        filterColumn: { type: FilterColumn, required: true }       
    },
    
    computed:{
        selectOptions(){
            let codeItems = this.filterColumn.codeItems;//[{code,name},{code,name}]
            let selectOptions_ = undefined;
            if (codeItems) {
                selectOptions_ = codeItems.map((codeItem: any) => { return { key: codeItem.code, title: codeItem.name, value:codeItem.code, label: codeItem.name} });
            }

            let nameItems = this.filterColumn.nameItems;//[{id,name},{id,name}]
            if (nameItems) {
                selectOptions_ = nameItems.map((nameItem: any) => { return { key: nameItem.id, title: nameItem.name, value:nameItem.id, label: nameItem.name } });
            }
            return selectOptions_;
        }
    },
    methods: {
        onChange() {
            this.filterColumn.formatQueryValue();
            this.$emit('change', { filterColumn: this.filterColumn })
        },
    },
    mounted(){
                
    },
    emits: ['change']
})
</script>
